<template>
  <div class="custom-manage">
    <el-card>
      <h3>
        会员管理
        <!-- <el-button type="primary" icon="el-icon-search" size="small" circle @click="search"></el-button> -->
        <el-input v-model="searchNumber" placeholder="用户手机号" style="width: 160px; margin-right: 10px;float: right;margin: 10px;"></el-input>
      </h3>
      <el-table style="width: 100%" :data="filteredVips" border
        :cell-style="cellStyle">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序号" type="index" :index="indexMethod" width="80"></el-table-column>
        <el-table-column prop="imgUrl" label="用户头像" width="120">
          <template slot-scope="scope">
            <img :src="scope.row.imgUrl" alt="" style="width: 100%;height: 50px;">
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="姓名" width="120"> </el-table-column>
        <el-table-column prop="vipType" label="vip等级" width="120"> </el-table-column>
        <el-table-column prop="telephone" label="手机号码" width="120"> </el-table-column>
        <el-table-column prop="sex" label="性别" width="80"> </el-table-column>
        <el-table-column prop="startTime" label="开始日期" width="180"> </el-table-column>
        <el-table-column prop="endTime" label="截止日期" width="180"> </el-table-column>
        <el-table-column prop="status" label="状态" width="80"> </el-table-column>
        <!-- <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="primary" size="small" icon="el-icon-edit" circle
              @click="editUser(scope.row.orderId, scope.row.idCard, scope.row.state)"></el-button> -->
        <!-- <el-button type="danger" size="small" circle icon="el-icon-delete"
              @click="deleteUser(scope.row.orderId)"></el-button> -->
        <!-- </template> -->
        <!-- </el-table-column> -->
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { allVip } from '@/api/vip'

export default {
  name: 'MemberManage',
  data() {
    return {
      searchNumber: '',
      currentPage: 1,
      total: 0,
      pageSizes: [],
      pageSize: 5,
      vipList: []
    }
  },
  computed: {
    filteredVips() {
      return this.vipList.filter(vip => {
        return !this.searchNumber || vip.telephone.includes(this.searchNumber)
      }).slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    },
  },
  created() {
    for (let i = 0; i < 5; i++) {
      this.pageSizes.push(5 * (i + 1))
    }
    this.fetchData()
  },
  methods: {
    fetchData() {
      allVip().then(res => {
        this.vipList = res
        this.total = this.vipList.length
        const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' }
        for (let i = 0; i < this.vipList.length; i++) {
          // this.vipList[i].imgUrl = process.env.VUE_APP_IMG_PREFIX + this.vipList[i].imgUrl
          this.vipList[i].startTime = new Date(this.vipList[i].startTime).toLocaleDateString(undefined, options)
          this.vipList[i].endTime = new Date(this.vipList[i].endTime).toLocaleDateString(undefined, options)
        }
      })
    },
    search() {
      this.$prompt('请输入电话号搜索', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        for (let i = 0; i < this.vipList.length; i++) {
          if (this.vipList[i].telephone === value) {
            this.$message({
              type: 'success',
              message: '搜索到该会员'
            });
            this.vipList = [this.vipList[i]]
            return
          }
        }
        this.$message({
          type: 'error',
          message: '没有搜索到该会员'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'vipType') {
        switch (row.vipType) {
          case '黄金':
            return { color: '#FFD700', fontWeight: 'bold' }; // 金色
          case '白银':
            return { color: '#C0C0C0', fontWeight: 'bold' }; // 银色
          case '青铜':
            return { color: '#CD7F32', fontWeight: 'bold' }; // 铜色
          case '铂金':
            return { color: '#008899', fontWeight: 'bold' }; // 铂金色
          case '钻石':
            return { color: '#0094c8', fontWeight: 'bold' }; // 钻石色
          default:
            return {};
        }
      }
      return {};
    },
    //切换每页条数容量
    handleSizeChange(val) {
      this.currentPage = 1
      this.pageSize = val
      this.fetchData()
    },
    //切换当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    indexMethod(index) {
      return index + 1 + (this.currentPage - 1) * this.pageSize;
    },
  }
}
</script>

<style lang="less" scoped>
.custom-manage {
  display: flex;
  justify-content: center;
}

.el-card {
  display: flex;
  flex-direction: column;
  width: 94%;
  margin: 20px 0;

  h3 {
    position: relative;
    height: 35px;

    .el-button {
      position: absolute;
      right: 10px;
      top: 5;
    }
  }

  .el-table {
    width: 100%;
    text-align: center;

    .el-table-column {
      text-align: center;
    }
  }
}

.el-pagination {
  margin: 10px 0 10px 300px;
}
</style>
